<!DOCTYPE html>


  <html class="dark page-post">


<head><meta name="generator" content="Hexo 3.9.0">
  <meta charset="utf-8">
  
  <title>DOM编程之API学习总结篇 | Poetry&#39;s Blog</title>

  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

  
    <meta name="keywords" content="JavaScript,DOM,">
  

  <meta name="description" content="原文 链接  一、基本类型介绍1.1 Node类型 DOM1级定义了一个Node接口，该接口由DOM中所有节点类型实现。这个Node接口在JS中是作为Node类型实现的。在IE9以下版本无法访问到这个类型，JS中所有节点都继承自Node类型，都共享着相同的基本属性和方法 Node有一个属性nodeType表示Node的类型，它是一个整数，其数值分别表示相应的Node类型">
<meta name="keywords" content="JavaScript,DOM">
<meta property="og:type" content="article">
<meta property="og:title" content="DOM编程之API学习总结篇">
<meta property="og:url" content="http://blog.poetries.top/2016/09/22/DOM编程之API学习总结篇/index.html">
<meta property="og:site_name" content="Poetry&#39;s Blog">
<meta property="og:description" content="原文 链接  一、基本类型介绍1.1 Node类型 DOM1级定义了一个Node接口，该接口由DOM中所有节点类型实现。这个Node接口在JS中是作为Node类型实现的。在IE9以下版本无法访问到这个类型，JS中所有节点都继承自Node类型，都共享着相同的基本属性和方法 Node有一个属性nodeType表示Node的类型，它是一个整数，其数值分别表示相应的Node类型">
<meta property="og:locale" content="zh-Hans">
<meta property="og:image" content="http://7xq6al.com1.z0.glb.clouddn.com/d1.png">
<meta property="og:image" content="http://7xq6al.com1.z0.glb.clouddn.com/d2.png">
<meta property="og:image" content="http://7xq6al.com1.z0.glb.clouddn.com/d3.png">
<meta property="og:image" content="http://7xq6al.com1.z0.glb.clouddn.com/d4.png">
<meta property="og:image" content="http://7xq6al.com1.z0.glb.clouddn.com/d5.png">
<meta property="og:image" content="http://7xq6al.com1.z0.glb.clouddn.com/d6.png">
<meta property="og:image" content="http://7xq6al.com1.z0.glb.clouddn.com/d7.png">
<meta property="og:image" content="http://7xq6al.com1.z0.glb.clouddn.com/d8.png">
<meta property="og:image" content="http://7xq6al.com1.z0.glb.clouddn.com/d9.png">
<meta property="og:image" content="http://7xq6al.com1.z0.glb.clouddn.com/d10.png">
<meta property="og:image" content="http://7xq6al.com1.z0.glb.clouddn.com/d11.png">
<meta property="og:image" content="http://7xq6al.com1.z0.glb.clouddn.com/d12.png">
<meta property="og:image" content="http://7xq6al.com1.z0.glb.clouddn.com/d13.png">
<meta property="og:image" content="http://7xq6al.com1.z0.glb.clouddn.com/d14.png">
<meta property="og:image" content="http://7xq6al.com1.z0.glb.clouddn.com/d15.png">
<meta property="og:updated_time" content="2020-08-15T04:25:31.898Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="DOM编程之API学习总结篇">
<meta name="twitter:description" content="原文 链接  一、基本类型介绍1.1 Node类型 DOM1级定义了一个Node接口，该接口由DOM中所有节点类型实现。这个Node接口在JS中是作为Node类型实现的。在IE9以下版本无法访问到这个类型，JS中所有节点都继承自Node类型，都共享着相同的基本属性和方法 Node有一个属性nodeType表示Node的类型，它是一个整数，其数值分别表示相应的Node类型">
<meta name="twitter:image" content="http://7xq6al.com1.z0.glb.clouddn.com/d1.png">

  

  
    <link rel="icon" href="/favicon.ico">
  

  <link href="/css/styles.css?v=c114cbeddx" rel="stylesheet">
<link href="/css/other.css?v=c114cbeddx" rel="stylesheet">


  
    <link rel="stylesheet" href="/css/personal-style.css">
  

  

  
  <script type="text/javascript">
    var _hmt = _hmt || [];
    (function() {
      var hm = document.createElement("script");
      hm.src = "//hm.baidu.com/hm.js?40b1f89aa80f2527b3db779c6898c879";
      var s = document.getElementsByTagName("script")[0];
      s.parentNode.insertBefore(hm, s);
    })();
  </script>


  
  <script type="text/javascript">
	(function(){
	    var bp = document.createElement('script');
	    var curProtocol = window.location.protocol.split(':')[0];
	    if (curProtocol === 'https') {
	        bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';        
	    }
	    else {
	        bp.src = 'http://push.zhanzhang.baidu.com/push.js';
	    }
	    var s = document.getElementsByTagName("script")[0];
	    s.parentNode.insertBefore(bp, s);
	})();
  </script>



  
    <script async src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
    <link rel="stylesheet" href="//cdn.bootcss.com/font-awesome/4.3.0/css/font-awesome.min.css">
  

  <!-- 聊天系统 -->
  
    
   <link type="text/css" rel="stylesheet" href="/renxi/default.css">
   <style>
      #modal {
        position: static !important;
      }
      .filter {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background: #fe5757;
        animation: colorChange 30s ease-in-out infinite;
        animation-fill-mode: both;
        mix-blend-mode: overlay;
      }
  
      @keyframes colorChange {
        0%, 100% {
            opacity: 0;
        }
        50% {
            opacity: .9;
        }
      }
   </style>
</head>
</html>
<body>
  
  
    <span id="toolbox-mobile" class="toolbox-mobile">导航</span>
  

  <div class="post-header CENTER">
   
  <div class="toolbox">
    <a class="toolbox-entry" href="/">
      <span class="toolbox-entry-text">导航</span>
      <i class="icon-angle-down"></i>
      <i class="icon-home"></i>
    </a>
    <ul class="list-toolbox">
      
        <li class="item-toolbox">
          <a
            class="CIRCLE"
            href="/archives/"
            rel="noopener noreferrer"
            target="_self"
            >
            博客
          </a>
        </li>
      
        <li class="item-toolbox">
          <a
            class="CIRCLE"
            href="/categories/"
            rel="noopener noreferrer"
            target="_self"
            >
            分类
          </a>
        </li>
      
        <li class="item-toolbox">
          <a
            class="CIRCLE"
            href="/tags/"
            rel="noopener noreferrer"
            target="_self"
            >
            标签
          </a>
        </li>
      
        <li class="item-toolbox">
          <a
            class="CIRCLE"
            href="/search/"
            rel="noopener noreferrer"
            target="_self"
            >
            搜索
          </a>
        </li>
      
        <li class="item-toolbox">
          <a
            class="CIRCLE"
            href="/link/"
            rel="noopener noreferrer"
            target="_self"
            >
            友链
          </a>
        </li>
      
        <li class="item-toolbox">
          <a
            class="CIRCLE"
            href="/about/"
            rel="noopener noreferrer"
            target="_self"
            >
            关于
          </a>
        </li>
      
    </ul>
  </div>


</div>


  <div id="toc" class="toc-article">
    <strong class="toc-title">文章目录<i class="iconfont toc-title" style="display:inline-block;color:#87998d;width:20px;height:20px;">&#xf004b;</i></strong>
    <ol class="toc"><li class="toc-item toc-level-3"><a class="toc-link" href="#一、基本类型介绍"><span class="toc-text">一、基本类型介绍</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#1-1-Node类型"><span class="toc-text">1.1 Node类型</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#1-2-Element类型"><span class="toc-text">1.2 Element类型</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#1-3-Text类型"><span class="toc-text">1.3 Text类型</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#1-4-Attr类型"><span class="toc-text">1.4 Attr类型</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#1-5-Comment类型"><span class="toc-text">1.5 Comment类型</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#1-6-Document"><span class="toc-text">1.6 Document</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#1-7-DocumentFragment类型"><span class="toc-text">1.7 DocumentFragment类型</span></a></li></ol></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#二、-DOM提供的几个属性"><span class="toc-text">二、 DOM提供的几个属性</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#2-1-childNodes属性"><span class="toc-text">2.1 childNodes属性</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#2-2-nodeType属性"><span class="toc-text">2.2 nodeType属性</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#2-3-nodeValue属性"><span class="toc-text">2.3 nodeValue属性</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#2-4-firstChild和lastChild属性"><span class="toc-text">2.4 firstChild和lastChild属性</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#三、节点创建型API"><span class="toc-text">三、节点创建型API</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#3-1-createElement"><span class="toc-text">3.1 createElement</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#3-2-createTextNode"><span class="toc-text">3.2 createTextNode</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#3-3-cloneNode"><span class="toc-text">3.3 cloneNode</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#3-4-createDocumentFragment"><span class="toc-text">3.4 createDocumentFragment</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#3-5-创建型API总结"><span class="toc-text">3.5 创建型API总结</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#四、页面修改型API"><span class="toc-text">四、页面修改型API</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#4-1-appendChild"><span class="toc-text">4.1 appendChild</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#4-2-insertBefore"><span class="toc-text">4.2 insertBefore</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#4-3-removeChild"><span class="toc-text">4.3 removeChild</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#4-4-replaceChild"><span class="toc-text">4.4 replaceChild</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#4-5-页面修改型API总结"><span class="toc-text">4.5 页面修改型API总结</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#五、节点查询型API"><span class="toc-text">五、节点查询型API</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#5-1-document-getElementById"><span class="toc-text">5.1 document.getElementById</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#5-2-document-getElementsByTagName"><span class="toc-text">5.2 document.getElementsByTagName</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#5-3-document-getElementsByName"><span class="toc-text">5.3 document.getElementsByName</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#5-4-document-getElementsByClassName"><span class="toc-text">5.4 document.getElementsByClassName</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#5-5-document-querySelector和document-querySelectorAll"><span class="toc-text">5.5 document.querySelector和document.querySelectorAll</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#六、节点关系型API"><span class="toc-text">六、节点关系型API</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#6-1-父关系型API"><span class="toc-text">6.1 父关系型API</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#6-2-兄弟关系型API"><span class="toc-text">6.2 兄弟关系型API</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#6-3-子关系型API"><span class="toc-text">6.3 子关系型API</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#七、元素属性型"><span class="toc-text">七、元素属性型</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#7-1-setAttribute"><span class="toc-text">7.1 setAttribute</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#7-2-getAttribute"><span class="toc-text">7.2 getAttribute</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#八、表格操作"><span class="toc-text">八、表格操作</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#九、样式操作"><span class="toc-text">九、样式操作</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#十、大小和偏移"><span class="toc-text">十、大小和偏移</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#十一、网上的一张思维导图总结"><span class="toc-text">十一、网上的一张思维导图总结</span></a></li></ol>
  </div>
  




<div class="content content-post CENTER">
   <!-- canvas 彩带 -->
<canvas id="evanyou" width="1302" height="678" style="position: fixed;width: 100%;height: 100%;top: 0;left:0;z-index:-1;"></canvas>

<article id="post-DOM编程之API学习总结篇" class="article article-type-post" itemprop="blogPost">
  <header class="article-header" style="position:relative;">
    <h1 class="post-title">DOM编程之API学习总结篇</h1>

    <div class="article-meta">
      <span>
        <i class="icon-calendar"></i>
        <span>2016.09.22</span>
      </span>

      
        <span class="article-author">
          <i class="icon-user"></i>
          <span>Poetry</span>
        </span>
      

      
  <span class="article-category">
    <i class="icon-list"></i>
    <a class="article-category-link" href="/categories/Front-End/">Front-End</a>
  </span>



      

      
      <i class="fa fa-eye"></i> 
        <span id="busuanzi_container_page_pv">
           &nbsp热度 <span id="busuanzi_value_page_pv">
           <i class="fa fa-spinner fa-spin"></i></span>℃
        </span>
      
      
       
          <span class="post-count">
            <i class="fa fa-file-word-o"></i>&nbsp
            <span>字数统计 5.7k字</span>
          </span>

          <span class="post-count">
            <i class="fa fa-columns"></i>&nbsp
            <span>阅读时长 22分</span>
          </span>
      
      
    </div>

    <i class="iconfont" id="toc-eye" style="display:inline-block;color:#b36619;position:absolute;top:0;right:0;cursor:pointer;
    font-size: 24px;">&#xe61c;</i>

  </header>

  <div class="article-content">
    
      <div id="container">
        <blockquote>
<p>原文 <a href="http://blog.poetries.top/2016/09/22/DOM%E7%BC%96%E7%A8%8B%E4%B9%8BAPI%E5%AD%A6%E4%B9%A0%E6%80%BB%E7%BB%93%E7%AF%87/">链接</a></p>
</blockquote>
<h3 id="一、基本类型介绍"><a href="#一、基本类型介绍" class="headerlink" title="一、基本类型介绍"></a>一、基本类型介绍</h3><h4 id="1-1-Node类型"><a href="#1-1-Node类型" class="headerlink" title="1.1 Node类型"></a>1.1 Node类型</h4><ul>
<li><code>DOM1</code>级定义了一个<code>Node</code>接口，该接口由<code>DOM</code>中所有节点类型实现。这个<code>Node</code>接口在<code>JS</code>中是作为<code>Node</code>类型实现的。在<code>IE9</code>以下版本无法访问到这个类型，<code>JS</code>中所有节点都继承自<code>Node</code>类型，都共享着相同的基本属性和方法</li>
<li><code>Node</code>有一个属性<code>nodeType</code>表示<code>Node</code>的类型，它是一个整数，其数值分别表示相应的<code>Node</code>类型</li>
</ul>
<p><img src="http://7xq6al.com1.z0.glb.clouddn.com/d1.png" alt></p>
<a id="more"></a>
<p><img src="http://7xq6al.com1.z0.glb.clouddn.com/d2.png" alt></p>
<ul>
<li>假设我们要判断一个<code>Node</code>是不是元素，我们可以这样判断</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">if</span>(someNode.nodeType == <span class="number">1</span>)&#123;</span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">"Node is a element"</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ul>
<li>这些<code>Node</code>类型中，我们最常用的就是<code>element</code>，<code>text</code>，<code>attribute</code>，<code>comment</code>，<code>document</code>，<code>document_fragment</code>这几种类型</li>
</ul>
<h5 id="1-2-Element类型"><a href="#1-2-Element类型" class="headerlink" title="1.2 Element类型"></a>1.2 Element类型</h5><hr>
<p><img src="http://7xq6al.com1.z0.glb.clouddn.com/d3.png" alt></p>
<ul>
<li><code>Element</code>提供了对元素标签名，子节点和特性的访问，我们常用<code>HTML</code>元素比如<code>div</code>，<code>span</code>，<code>a</code>等标签就是<code>element</code>中的一种。</li>
<li><p><strong><code>Element</code>有下面几条特性：</strong></p>
<ul>
<li><code>nodeType</code>为<code>1</code></li>
<li><code>nodeName</code>为元素标签名，<code>tagName</code>也是返回标签名</li>
<li><code>nodeValue</code>为<code>null</code></li>
<li><code>parentNode</code>可能是<code>Document</code>或<code>Element</code></li>
<li>子节点可能是 <code>Element</code>，<code>Text</code>，<code>Comment</code>，<code>Processing_Instruction</code>，<code>CDATASection</code> 或 <code>EntityReference</code></li>
</ul>
</li>
</ul>
<h5 id="1-3-Text类型"><a href="#1-3-Text类型" class="headerlink" title="1.3 Text类型"></a>1.3 Text类型</h5><hr>
<p><img src="http://7xq6al.com1.z0.glb.clouddn.com/d4.png" alt></p>
<ul>
<li><code>Text</code>表示文本节点，它包含的是纯文本内容，不能包含<code>html</code>代码，但可以包含转义后的<code>html</code>代码。<code>Text</code>有下面的特性：<ul>
<li><code>nodeType</code>为<code>3</code></li>
<li><code>nodeName</code>为<code>#text</code></li>
<li><code>nodeValue</code>为文本内容</li>
<li><code>parentNode</code>是一个<code>Element</code></li>
<li>没有子节点</li>
</ul>
</li>
</ul>
<h5 id="1-4-Attr类型"><a href="#1-4-Attr类型" class="headerlink" title="1.4 Attr类型"></a>1.4 Attr类型</h5><hr>
<p><img src="http://7xq6al.com1.z0.glb.clouddn.com/d5.png" alt></p>
<ul>
<li><code>Attr</code>类型表示元素的特性，相当于元素的<code>attributes</code>属性中的节点，它有下面的特性：<ul>
<li><code>nodeType</code>值为2</li>
<li><code>nodeName</code>是特性的名称</li>
<li><code>nodeValue</code>是特性的值</li>
<li><code>parentNode</code>为<code>null</code></li>
</ul>
</li>
</ul>
<h5 id="1-5-Comment类型"><a href="#1-5-Comment类型" class="headerlink" title="1.5 Comment类型"></a>1.5 Comment类型</h5><hr>
<ul>
<li><code>Comment</code>表示<code>HTML</code>文档中的注释，它有下面的几种特征：<ul>
<li><code>nodeType</code>为8</li>
<li><code>nodeName</code>为<code>#comment</code></li>
<li><code>nodeValue</code>为注释的内容</li>
<li><code>parentNode</code>可能是<code>Document</code>或<code>Element</code></li>
<li>没有子节点</li>
</ul>
</li>
</ul>
<h5 id="1-6-Document"><a href="#1-6-Document" class="headerlink" title="1.6 Document"></a>1.6 Document</h5><hr>
<p><img src="http://7xq6al.com1.z0.glb.clouddn.com/d6.png" alt></p>
<ul>
<li><code>Document</code>表示文档，在浏览器中，<code>document</code>对象是<code>HTMLDocument</code>的一个实例，表示整个页面，它同时也是<code>window</code>对象的一个属性。<code>Document</code>有下面的特性：<ul>
<li><code>nodeType</code>为<code>9</code></li>
<li><code>nodeName</code>为<code>#document</code></li>
<li><code>nodeValue</code>为 <code>null</code></li>
<li><code>parentNode</code>为 <code>null</code></li>
<li>子节点可能是一个<code>DocumentType</code>或<code>Element</code></li>
</ul>
</li>
</ul>
<h5 id="1-7-DocumentFragment类型"><a href="#1-7-DocumentFragment类型" class="headerlink" title="1.7 DocumentFragment类型"></a>1.7 DocumentFragment类型</h5><hr>
<ul>
<li><p><code>DocumentFragment</code>是所有节点中唯一一个没有对应标记的类型，它表示一种轻量级的文档，可能当作一个临时的仓库用来保存可能会添加到文档中的节点。<code>DocumentFragment</code>有下面的特性：</p>
<ul>
<li><code>nodeType</code>为<code>11</code></li>
<li><code>nodeName</code>为<code>#document-fragment</code></li>
<li><code>nodeValue</code>为<code>null</code></li>
<li><code>parentNode</code>为<code>null</code></li>
</ul>
</li>
<li><p>我们简单地介绍了几种常见的<code>Node</code>类型，要记住，<code>HTML</code>中的节点并不只是包括元素节点，它还包括文本节点，注释节点等等。在这里我们只是简单地说明了几种常见的节点.</p>
</li>
</ul>
<h3 id="二、-DOM提供的几个属性"><a href="#二、-DOM提供的几个属性" class="headerlink" title="二、 DOM提供的几个属性"></a>二、 DOM提供的几个属性</h3><hr>
<h4 id="2-1-childNodes属性"><a href="#2-1-childNodes属性" class="headerlink" title="2.1 childNodes属性"></a>2.1 childNodes属性</h4><hr>
<ul>
<li>在一棵节点树上，<code>childNodes</code>属性可以用来获取任何一个元素的所有子节点，它是一个包含这个元素全部子元素的数组</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line">element.childNodes</span><br></pre></td></tr></table></figure>
<h4 id="2-2-nodeType属性"><a href="#2-2-nodeType属性" class="headerlink" title="2.2 nodeType属性"></a>2.2 nodeType属性</h4><hr>
<ul>
<li>节点之间的关系构成了节点层次，<code>html</code> 页面的可以画出一个以<code>html</code>标签为根节点的树形结构<br><code>DOM</code> 会把文档看作是一棵树，同时定义了很多方法来操作这棵数中的每一个元素（节点）</li>
</ul>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"en"</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">title</span>&gt;</span>Document<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">p</span>&gt;</span>hello world!!!<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p><img src="http://7xq6al.com1.z0.glb.clouddn.com/d7.png" alt></p>
<ul>
<li>每一个节点都有<code>nodeType</code>属性</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line">node.nodeType</span><br></pre></td></tr></table></figure>
<ul>
<li><code>nodeType</code>属性总共有12中可能取值，但其中仅有3种有实用价值<ul>
<li>元素节点的<code>nodeType</code>属性值是1</li>
<li>属性节点的<code>nodeType</code>属性值是2</li>
<li>文本节点的<code>nodeType</code>属性值是3</li>
</ul>
</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line">description.firstChild.nodeValue = text;</span><br></pre></td></tr></table></figure>
<h4 id="2-3-nodeValue属性"><a href="#2-3-nodeValue属性" class="headerlink" title="2.3 nodeValue属性"></a>2.3 nodeValue属性</h4><hr>
<ul>
<li><code>nodeValue</code>属性<ul>
<li>如果想改变一个文本节点的值，那就使用<code>DOM</code>提供的<code>nodeValue</code>,它用来得到一个节点的值 <code>node.nodeValue</code> </li>
<li>需要注意：<code>nodeValue</code>属性获取对象的值时，得到的并不是包含在这个段落里的文本</li>
<li>nodeValue属性不仅可以用来检测节点的值，还可以设置节点的值</li>
</ul>
</li>
</ul>
<h4 id="2-4-firstChild和lastChild属性"><a href="#2-4-firstChild和lastChild属性" class="headerlink" title="2.4 firstChild和lastChild属性"></a>2.4 firstChild和lastChild属性</h4><hr>
<ul>
<li>数组元素<code>childNodes[0]</code>有个更直观的同义词。无论如何，只要访问<code>childNodes</code>数组的第一个元素，都可以把它写成<code>firstChild</code></li>
</ul>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line">node.firstChild</span><br></pre></td></tr></table></figure>
<p>与下面等价</p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line">node.childNodes[<span class="number">0</span>]</span><br></pre></td></tr></table></figure>
<ul>
<li><code>DOM</code>还提供了一个与之对应的<code>lastChild</code>属性</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line">node.lastChild</span><br></pre></td></tr></table></figure>
<h3 id="三、节点创建型API"><a href="#三、节点创建型API" class="headerlink" title="三、节点创建型API"></a>三、节点创建型API</h3><hr>
<ul>
<li>在这里，我将常用的<code>DOM</code>操作<code>api</code>进行分类，首先要介绍的是创建型的<code>api</code>。这一类型的<code>api</code>，简而言之就是用来创建节点的</li>
</ul>
<h4 id="3-1-createElement"><a href="#3-1-createElement" class="headerlink" title="3.1 createElement"></a>3.1 createElement</h4><hr>
<ul>
<li><code>createElement</code>通过传入指定的一个标签名来创建一个元素，如果传入的标签名是一个未知的，则会创建一个自定义的标签，注意：<code>IE8</code>以下浏览器不支持自定义标签</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"></span><br><span class="line"><span class="keyword">var</span> div = <span class="built_in">document</span>.createElement(<span class="string">"div"</span>);</span><br></pre></td></tr></table></figure>
<ul>
<li>使用<code>createElement</code>要注意：通过<code>createElement</code>创建的元素并不属于<code>html</code>文档，它只是创建出来，并未添加到<code>html</code>文档中，要调用<code>appendChild</code>或<code>insertBefore</code>等方法将其添加到<code>HTML</code>文档树中</li>
</ul>
<h4 id="3-2-createTextNode"><a href="#3-2-createTextNode" class="headerlink" title="3.2 createTextNode"></a>3.2 createTextNode</h4><hr>
<ul>
<li><code>createTextNode</code>用来创建一个文本节点，用法如下</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"></span><br><span class="line"><span class="keyword">var</span> textNode = <span class="built_in">document</span>.createTextNode(<span class="string">"一个TextNode"</span>);</span><br></pre></td></tr></table></figure>
<ul>
<li><code>createTextNode</code>接收一个参数，这个参数就是文本节点中的文本，和<code>createElement</code>一样，创建后的文本节点也只是独立的一个节点，同样需要<code>appendChild</code>将其添加到<code>HTML</code>文档树中</li>
</ul>
<h4 id="3-3-cloneNode"><a href="#3-3-cloneNode" class="headerlink" title="3.3 cloneNode"></a>3.3 cloneNode</h4><ul>
<li><code>cloneNode</code>是用来返回调用方法的节点的一个副本，它接收一个<code>bool</code>参数，用来表示是否复制子元素，使用如下：</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> parent = <span class="built_in">document</span>.getElementById(<span class="string">"parentElement"</span>); </span><br><span class="line"><span class="keyword">var</span> parent2 = parent.cloneNode(<span class="literal">true</span>);<span class="comment">// 传入true</span></span><br><span class="line">parent2.id = <span class="string">"parent2"</span>;</span><br></pre></td></tr></table></figure>
<ul>
<li>这段代码通过<code>cloneNode</code>复制了一份<code>parent</code>元素，其中<code>cloneNode</code>的参数为<code>true</code>，表示<code>parent</code>的子节点也被复制，如果传入<code>false</code>，则表示只复制了<code>parent</code>节点</li>
</ul>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"parent"</span>&gt;</span></span><br><span class="line">    我是父元素的文本</span><br><span class="line">    <span class="tag">&lt;<span class="name">br</span>/&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">span</span>&gt;</span></span><br><span class="line">        我是子元素</span><br><span class="line">    <span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">button</span> <span class="attr">id</span>=<span class="string">"btnCopy"</span>&gt;</span>复制<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line"></span><br><span class="line">var parent = document.getElementById("parent");</span><br><span class="line">document.getElementById("btnCopy").onclick = function()&#123;</span><br><span class="line">	var parent2 = parent.cloneNode(true);</span><br><span class="line">	parent2.id = "parent2";</span><br><span class="line">	document.body.appendChild(parent2);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ul>
<li><p>这段代码很简单，主要是绑定<code>button</code>事件，事件内容是复制了一个<code>parent</code>，修改其<code>id</code>，然后添加到文档中</p>
</li>
<li><p><strong>这里有几点要注意：</strong></p>
<ul>
<li>和<code>createElement</code>一样，<code>cloneNode</code>创建的节点只是游离有<code>html</code>文档外的节点，要调用<code>appendChild</code>方法才能添加到文档树中</li>
<li>如果复制的元素有<code>id</code>，则其副本同样会包含该<code>id</code>，由于<code>id</code>具有唯一性，所以在复制节点后必须要修改其id</li>
<li>调用接收的<code>bool</code>参数最好传入，如果不传入该参数，不同浏览器对其默认值的处理可能不同</li>
</ul>
</li>
<li><p>除此之外，我们还有一个需要注意的点：</p>
<ul>
<li>如果被复制的节点绑定了事件，则副本也会跟着绑定该事件吗？这里要分情况讨论：<ul>
<li>如果是通过<code>addEventListener</code>或者比如<code>onclick</code>进行绑定事件，则副本节点不会绑定该事件</li>
<li>如果是内联方式绑定比如</li>
</ul>
</li>
</ul>
</li>
</ul>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">onclick</span>=<span class="string">"showParent()"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>
<ul>
<li>这样的话，副本节点同样会触发事件</li>
</ul>
<h4 id="3-4-createDocumentFragment"><a href="#3-4-createDocumentFragment" class="headerlink" title="3.4 createDocumentFragment"></a>3.4 createDocumentFragment</h4><hr>
<ul>
<li><p><code>createDocumentFragment</code>方法用来创建一个<code>DocumentFragment</code>。在前面我们说到<code>DocumentFragment</code>表示一种轻量级的文档，它的作用主要是存储临时的节点用来准备添加到文档中</p>
</li>
<li><p><code>createDocumentFragment</code>方法主要是用于添加大量节点到文档中时会使用到。假设要循环一组数据，然后创建多个节点添加到文档中</p>
</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line">&lt;ul id=<span class="string">"list"</span>&gt;&lt;<span class="regexp">/ul&gt;</span></span><br><span class="line"><span class="regexp">&lt;input type="button" value="添加多项" id="btnAdd" /</span>&gt;</span><br><span class="line"></span><br><span class="line"><span class="built_in">document</span>.getElementById(<span class="string">"btnAdd"</span>).onclick = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">	<span class="keyword">var</span> list = <span class="built_in">document</span>.getElementById(<span class="string">"list"</span>);</span><br><span class="line">	<span class="keyword">for</span>(<span class="keyword">var</span> i = <span class="number">0</span>;i &lt; <span class="number">100</span>; i++)&#123;</span><br><span class="line">		<span class="keyword">var</span> li = <span class="built_in">document</span>.createElement(<span class="string">"li"</span>);</span><br><span class="line">		li.textContent = i;</span><br><span class="line">		list.appendChild(li);</span><br><span class="line">	&#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ul>
<li><p>这段代码将按钮绑定了一个事件，这个事件创建了100个<code>li</code>节点，然后依次将其添加<code>HTML</code>文档中。这样做有一个缺点：每次一创建一个新的元素，然后添加到文档树中，这个过程会造成浏览器的回流。所谓回流简单说就是指元素大小和位置会被重新计算，如果添加的元素太多，会造成性能问题。这个时候，就是使用<code>createDocumentFragment了</code></p>
</li>
<li><p><code>DocumentFragment</code>不是文档树的一部分，它是保存在内存中的，所以不会造成回流问题。我们修改上面的代码如下</p>
</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="built_in">document</span>.getElementById(<span class="string">"btnAdd"</span>).onclick = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">	<span class="keyword">var</span> list = <span class="built_in">document</span>.getElementById(<span class="string">"list"</span>);	</span><br><span class="line">	<span class="keyword">var</span> fragment = <span class="built_in">document</span>.createDocumentFragment();</span><br><span class="line"></span><br><span class="line">	<span class="keyword">for</span>(<span class="keyword">var</span> i = <span class="number">0</span>;i &lt; <span class="number">100</span>; i++)&#123;</span><br><span class="line">	  <span class="keyword">var</span> li = <span class="built_in">document</span>.createElement(<span class="string">"li"</span>);</span><br><span class="line">		li.textContent = i;</span><br><span class="line">		fragment.appendChild(li);</span><br><span class="line">	&#125;</span><br><span class="line"></span><br><span class="line">	list.appendChild(fragment);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ul>
<li>优化后的代码主要是创建了一个<code>fragment</code>，每次生成的<code>li</code>节点先添加到<code>fragment</code>，最后一次性添加到<code>list</code></li>
</ul>
<h4 id="3-5-创建型API总结"><a href="#3-5-创建型API总结" class="headerlink" title="3.5 创建型API总结"></a>3.5 创建型API总结</h4><hr>
<ul>
<li><p>创建型<code>api</code>主要包括<code>createElement</code>，<code>createTextNode</code>，<code>cloneNode</code>和<code>createDocumentFragment</code>四个方法，需要注意下面几点：</p>
<ul>
<li>它们创建的节点只是一个孤立的节点，要通过<code>appendChild</code>添加到文档中</li>
<li><code>cloneNode</code>要注意如果被复制的节点是否包含子节点以及事件绑定等问题</li>
<li>使用<code>createDocumentFragment</code>来解决添加大量节点时的性能问题</li>
</ul>
</li>
</ul>
<h3 id="四、页面修改型API"><a href="#四、页面修改型API" class="headerlink" title="四、页面修改型API"></a>四、页面修改型API</h3><hr>
<ul>
<li>前面我们提到创建型<code>api</code>，它们只是创建节点，并没有真正修改到页面内容，而是要调用<code>appendChild</code>来将其添加到文档树中。我在这里将这类会修改到页面内容归为一类。<br>修改页面内容的<code>api</code>主要包括：<code>appendChild</code>，<code>insertBefore</code>，<code>removeChild</code>，<code>replaceChild</code></li>
</ul>
<h4 id="4-1-appendChild"><a href="#4-1-appendChild" class="headerlink" title="4.1 appendChild"></a>4.1 appendChild</h4><hr>
<ul>
<li><code>appendChild</code>我们在前面已经用到多次，就是将指定的节点添加到调用该方法的节点的子元素的末尾。调用方法如下：</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line">parent.appendChild(child);</span><br></pre></td></tr></table></figure>
<ul>
<li><p><code>child</code>节点将会作为<code>parent</code>节点的最后一个子节点</p>
</li>
<li><p><code>appendChild</code>这个方法很简单，但是还有有一点需要注意：如果被添加的节点是一个页面中存在的节点，则执行后这个节点将会添加到指定位置，其原本所在的位置将移除该节点，也就是说不会同时存在两个该节点在页面上，相当于把这个节点移动到另一个地方</p>
</li>
</ul>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"child"</span>&gt;</span></span><br><span class="line">    要被添加的节点</span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">br</span>/&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">br</span>/&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">br</span>/&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"parent"</span>&gt;</span></span><br><span class="line">    要移动的位置</span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span>		</span><br><span class="line"><span class="tag">&lt;<span class="name">input</span> <span class="attr">id</span>=<span class="string">"btnMove"</span> <span class="attr">type</span>=<span class="string">"button"</span> <span class="attr">value</span>=<span class="string">"移动节点"</span> /&gt;</span></span><br><span class="line"></span><br><span class="line">document.getElementById("btnMove").onclick = function()&#123;</span><br><span class="line">	var child = document.getElementById("child");</span><br><span class="line">	document.getElementById("parent").appendChild(child);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ul>
<li>这段代码主要是获取页面上的<code>child</code>节点，然后添加到指定位置，可以看到原本的<code>child</code>节点被移动到<code>parent</code>中了。<br>这里还有一个要注意的点：如果<code>child</code>绑定了事件，被移动时，它依然绑定着该事件</li>
</ul>
<h4 id="4-2-insertBefore"><a href="#4-2-insertBefore" class="headerlink" title="4.2 insertBefore"></a>4.2 insertBefore</h4><hr>
<ul>
<li><code>insertBefore</code>用来添加一个节点到一个参照节点之前，用法如下</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"></span><br><span class="line">parentNode.insertBefore(newNode,refNode);</span><br></pre></td></tr></table></figure>
<ul>
<li><code>parentNode</code>表示新节点被添加后的父节点</li>
<li><code>newNode</code>表示要添加的节点</li>
<li><code>refNode</code>表示参照节点，新节点会添加到这个节点之前</li>
</ul>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"parent"</span>&gt;</span></span><br><span class="line">    父节点</span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"child"</span>&gt;</span>				</span><br><span class="line">        子元素</span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"button"</span> <span class="attr">id</span>=<span class="string">"insertNode"</span> <span class="attr">value</span>=<span class="string">"插入节点"</span> /&gt;</span></span><br><span class="line"></span><br><span class="line">var parent = document.getElementById("parent");</span><br><span class="line">var child = document.getElementById("child");</span><br><span class="line">document.getElementById("insertNode").onclick = function()&#123;</span><br><span class="line">	var newNode = document.createElement("div");</span><br><span class="line">	newNode.textContent = "新节点"</span><br><span class="line">	parent.insertBefore(newNode,child);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ul>
<li>这段代码创建了一个新节点，然后添加到<code>child</code>节点之前</li>
<li><p>和<code>appendChild</code>一样，如果插入的节点是页面上的节点，则会移动该节点到指定位置，并且保留其绑定的事件。</p>
</li>
<li><p><strong>关于第二个参数参照节点还有几个注意的地方：</strong></p>
<ul>
<li><code>refNode</code>是必传的，如果不传该参数会报错</li>
<li>如果<code>refNode</code>是<code>undefined</code>或<code>null</code>，则<code>insertBefore</code>会将节点添加到子元素的末尾</li>
</ul>
</li>
</ul>
<h4 id="4-3-removeChild"><a href="#4-3-removeChild" class="headerlink" title="4.3 removeChild"></a>4.3 removeChild</h4><hr>
<ul>
<li><code>removeChild</code>顾名思义，就是删除指定的子节点并返回，用法如下</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"></span><br><span class="line"><span class="keyword">var</span> deletedChild = parent.removeChild(node);</span><br></pre></td></tr></table></figure>
<ul>
<li><p><code>deletedChild</code>指向被删除节点的引用，它等于<code>node</code>，被删除的节点仍然存在于内存中，可以对其进行下一步操作。</p>
</li>
<li><p><strong>注意</strong>：如果被删除的节点不是其子节点，则程序将会报错。我们可以通过下面的方式来确保可以删除：</p>
</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">if</span>(node.parentNode)&#123;</span><br><span class="line">    node.parentNode.removeChild(node);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ul>
<li>通过节点自己获取节点的父节点，然后将自身删除</li>
</ul>
<h4 id="4-4-replaceChild"><a href="#4-4-replaceChild" class="headerlink" title="4.4 replaceChild"></a>4.4 replaceChild</h4><hr>
<ul>
<li><code>replaceChild</code>用于使用一个节点替换另一个节点，用法如下</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"></span><br><span class="line">parent.replaceChild(newChild,oldChild);</span><br></pre></td></tr></table></figure>
<ul>
<li><code>newChild</code>是替换的节点，可以是新的节点，也可以是页面上的节点，如果是页面上的节点，则其将被转移到新的位置</li>
<li><code>oldChild</code>是被替换的节点</li>
</ul>
<h4 id="4-5-页面修改型API总结"><a href="#4-5-页面修改型API总结" class="headerlink" title="4.5 页面修改型API总结"></a>4.5 页面修改型API总结</h4><hr>
<ul>
<li>页面修改型api主要是这四个接口，<strong>要注意几个特点</strong>：<ul>
<li>不管是新增还是替换节点，如果新增或替换的节点是原本存在页面上的，则其原来位置的节点将被移除，也就是说同一个节点不能存在于页面的多个位置</li>
<li>节点本身绑定的事件会不会消失，会一直保留着</li>
</ul>
</li>
</ul>
<h3 id="五、节点查询型API"><a href="#五、节点查询型API" class="headerlink" title="五、节点查询型API"></a>五、节点查询型API</h3><hr>
<ul>
<li>节点查询型<code>API</code>也是非常常用的</li>
</ul>
<h4 id="5-1-document-getElementById"><a href="#5-1-document-getElementById" class="headerlink" title="5.1 document.getElementById"></a>5.1 document.getElementById</h4><hr>
<ul>
<li><p>这个接口很简单，根据元素<code>id</code>返回元素，返回值是<code>Element</code>类型，如果不存在该元素，则返回<code>null</code></p>
</li>
<li><p><strong>使用这个接口有几点要注意：</strong></p>
<ul>
<li>元素的<code>Id</code>是大小写敏感的，一定要写对元素的<code>id</code></li>
<li><code>HTML</code>文档中可能存在多个<code>id</code>相同的元素，则返回第一个元素</li>
<li>只从文档中进行搜索元素，如果创建了一个元素并指定<code>id</code>，但并没有添加到文档中，则这个元素是不会被查找到的</li>
</ul>
</li>
</ul>
<h4 id="5-2-document-getElementsByTagName"><a href="#5-2-document-getElementsByTagName" class="headerlink" title="5.2 document.getElementsByTagName"></a>5.2 document.getElementsByTagName</h4><hr>
<ul>
<li>这个接口根据元素标签名获取元素，返回一个即时的<code>HTMLCollection</code>类型，什么是即时的<code>HTMLCollection</code>类型呢？</li>
</ul>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span>&gt;</span>div1<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span>&gt;</span>div2<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">		</span><br><span class="line"><span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"button"</span> <span class="attr">value</span>=<span class="string">"显示数量"</span> <span class="attr">id</span>=<span class="string">"btnShowCount"</span>/&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"button"</span> <span class="attr">value</span>=<span class="string">"新增div"</span> <span class="attr">id</span>=<span class="string">"btnAddDiv"</span>/&gt;</span>	</span><br><span class="line"></span><br><span class="line">var divList = document.getElementsByTagName("div");</span><br><span class="line">document.getElementById("btnAddDiv").onclick = function()&#123;</span><br><span class="line">	var div = document.createElement("div");</span><br><span class="line">	div.textContent ="div" + (divList.length+1);</span><br><span class="line">	document.body.appendChild(div);</span><br><span class="line">&#125;</span><br><span class="line">	</span><br><span class="line">document.getElementById("btnShowCount").onclick = function()&#123;</span><br><span class="line">        alert(divList.length);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ul>
<li><p>这段代码中有两个按钮，一个按钮是显示<code>HTMLCollection</code>元素的个数，另一个按钮可以新增一个div标签到文档中。前面提到<code>HTMLCollcetion</code>元素是即时的表示该集合是随时变化的，也就是是文档中有几个<code>div</code>，它会随时进行变化，当我们新增一个<code>div</code>后，再访问<code>HTMLCollection</code>时，就会包含这个新增的<code>div</code></p>
</li>
<li><p><strong>使用document.getElementsByTagName这个方法有几点要注意</strong>：</p>
<ul>
<li>如果要对<code>HTMLCollection</code>集合进行循环操作，最好将其长度缓存起来，因为每次循环都会去计算长度，暂时缓存起来可以提高效率</li>
<li>如果没有存在指定的标签，该接口返回的不<code>是null</code>，而是一个空的<code>HTMLCollection</code></li>
<li><code>“*”</code>表示所有标签</li>
</ul>
</li>
</ul>
<h4 id="5-3-document-getElementsByName"><a href="#5-3-document-getElementsByName" class="headerlink" title="5.3 document.getElementsByName"></a>5.3 document.getElementsByName</h4><hr>
<ul>
<li><p><code>getElementsByName</code>主要是通过指定的<code>name</code>属性来获取元素，它返回一个即时的<code>NodeList</code>对象。一般用于获取表单元素的·name·属性</p>
</li>
<li><p><strong>使用这个接口主要要注意几点：</strong></p>
<ul>
<li>返回对象是一个即时的<code>NodeList</code>，它是随时变化的</li>
<li>在<code>HTML</code>元素中，并不是所有元素都有<code>name</code>属性，比如<code>div</code>是没有<code>name</code>属性的，但是如果强制设置<code>div的</code>name`属性，它也是可以被查找到的</li>
<li>在<code>IE</code>中，如果<code>id</code>设置成某个值，然后传入<code>getElementsByName</code>的参数值和<code>id</code>值一样，则这个元素是会被找到的，所以最好不好设置同样的值给<code>id</code>和<code>name</code></li>
</ul>
</li>
</ul>
<h4 id="5-4-document-getElementsByClassName"><a href="#5-4-document-getElementsByClassName" class="headerlink" title="5.4 document.getElementsByClassName"></a>5.4 document.getElementsByClassName</h4><hr>
<ul>
<li>这个<code>API</code>是根据元素的<code>class</code>返回一个即时的<code>HTMLCollection</code>，用法如下</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> elements = <span class="built_in">document</span>.getElementsByClassName(names);</span><br></pre></td></tr></table></figure>
<ul>
<li><strong>这个接口有下面几点要注意：</strong><ul>
<li>返回结果是一个即时的<code>HTMLCollection</code>，会随时根据文档结构变化</li>
<li><code>IE9</code>以下浏览器不支持</li>
<li>如果要获取<code>2</code>个以上<code>classname</code>，可传入多个<code>classname</code>，每个用空格相隔，例如</li>
</ul>
</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"></span><br><span class="line"><span class="keyword">var</span> elements = <span class="built_in">document</span>.getElementsByClassName(<span class="string">"test1 test2"</span>);</span><br></pre></td></tr></table></figure>
<h4 id="5-5-document-querySelector和document-querySelectorAll"><a href="#5-5-document-querySelector和document-querySelectorAll" class="headerlink" title="5.5 document.querySelector和document.querySelectorAll"></a>5.5 document.querySelector和document.querySelectorAll</h4><hr>
<ul>
<li><p>这两个<code>api</code>很相似，通过<code>css</code>选择器来查找元素，注意选择器要符合<code>CSS</code>选择器的规则</p>
</li>
<li><p>首先来介绍一下<code>document.querySelector</code></p>
</li>
<li><code>document.querySelector</code>返回第一个匹配的元素，如果没有匹配的元素，则返回<code>null</code>。</li>
<li><strong>注意</strong>，由于返回的是第一个匹配的元素，这个<code>api</code>使用的深度优先搜索来获取元素</li>
</ul>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">span</span> <span class="attr">class</span>=<span class="string">"test"</span>&gt;</span>第三级的span<span class="tag">&lt;/<span class="name">span</span>&gt;</span>	</span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"test"</span>&gt;</span>			</span><br><span class="line">    同级的第二个div</span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"button"</span> <span class="attr">id</span>=<span class="string">"btnGet"</span> <span class="attr">value</span>=<span class="string">"获取test元素"</span> /&gt;</span></span><br><span class="line"></span><br><span class="line">document.getElementById("btnGet").addEventListener("click",function()&#123;</span><br><span class="line">	var element = document.querySelector(".test");</span><br><span class="line">	alert(element.textContent);</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<ul>
<li><p>这个例子很简单，就是两个<code>class</code>都包<code>含“test”</code>的元素，一个在文档树的前面，但是它在第三级，另一个在文档树的后面，但它在第一级，通过<code>querySelector</code>获取元素时，它通过深度优先搜索，拿到文档树前面的第三级的元素</p>
</li>
<li><p><code>document.querySelectorAll</code>的不同之处在于它返回的是所有匹配的元素，而且可以匹配多个选择符</p>
</li>
</ul>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"test"</span>&gt;</span></span><br><span class="line">    class为test</span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"test"</span>&gt;</span></span><br><span class="line">    id为test</span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">input</span> <span class="attr">id</span>=<span class="string">"btnShow"</span> <span class="attr">type</span>=<span class="string">"button"</span> <span class="attr">value</span>=<span class="string">"显示内容"</span> /&gt;</span></span><br><span class="line"></span><br><span class="line">document.getElementById("btnShow").addEventListener("click",function()&#123;</span><br><span class="line">	var elements = document.querySelectorAll("#test,.test");	</span><br><span class="line">	for(var i = 0,length = elements.length;i<span class="tag">&lt;<span class="name">length;i++)&#123;</span></span></span><br><span class="line"><span class="tag">		<span class="attr">alert</span>(<span class="attr">elements</span>[<span class="attr">i</span>]<span class="attr">.textContent</span>);</span></span><br><span class="line"><span class="tag">	&#125;	</span></span><br><span class="line"><span class="tag">&#125;)</span></span><br></pre></td></tr></table></figure>
<ul>
<li><p>这段代码通过<code>querySelectorAll</code>，使用<code>id</code>选择器和<code>class</code>选择器选择了两个元素，并依次输出其内容。要注意两点：</p>
<ul>
<li><code>querySelectorAll</code>也是通过深度优先搜索，搜索的元素顺序和选择器的顺序无关</li>
<li>返回的是一个非即时的<code>NodeList</code>，也就是说结果不会随着文档树的变化而变化</li>
</ul>
</li>
<li><p><strong>兼容性问题</strong>：<code>querySelector</code>和<code>querySelectorAll</code>在<code>ie8</code>以下的浏览器不支持</p>
</li>
<li><p><strong>小结</strong>：</p>
<ul>
<li><code>document.getElementById</code>返回一个对象</li>
<li><code>document.getElementsByName</code>和<code>document.getElementsByClasName</code>返回一个对象数组</li>
</ul>
</li>
</ul>
<h3 id="六、节点关系型API"><a href="#六、节点关系型API" class="headerlink" title="六、节点关系型API"></a>六、节点关系型API</h3><hr>
<p><img src="http://7xq6al.com1.z0.glb.clouddn.com/d8.png" alt></p>
<ul>
<li>在<code>html</code>文档中的每个节点之间的关系都可以看成是家谱关系，包含父子关系，兄弟关系等等</li>
</ul>
<h4 id="6-1-父关系型API"><a href="#6-1-父关系型API" class="headerlink" title="6.1 父关系型API"></a>6.1 父关系型API</h4><hr>
<ul>
<li><code>parentNode</code>：每个节点都有一个<code>parentNode</code>属性，它表示元素的父节点。<code>Element</code>的父节点可能是<code>Element</code>，<code>Document</code>或<code>DocumentFragment</code></li>
<li><code>parentElement</code>：返回元素的父元素节点，与<code>parentNode</code>的区别在于，其父节点必须是一个<code>Element</code>，如果不是，则返回<code>null</code></li>
</ul>
<h4 id="6-2-兄弟关系型API"><a href="#6-2-兄弟关系型API" class="headerlink" title="6.2 兄弟关系型API"></a>6.2 兄弟关系型API</h4><hr>
<ul>
<li><code>previousSibling</code>：节点的前一个节点，如果该节点是第一个节点，则为<code>null</code>。注意有可能拿到的节点是文本节点或注释节点，与预期的不符，要进行处理一下</li>
<li><p><code>previousElementSibling</code>：返回前一个元素节点，前一个节点必须是<code>Element</code>，注意<code>IE9</code>以下浏览器不支持</p>
</li>
<li><p><code>nextSibling</code> <code>previousSibling</code> 存在兼容性问题</p>
</li>
<li><p><code>nextElementSibling</code> <code>previousElementSibling</code> 推荐使用</p>
</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line">&lt;script&gt;</span><br><span class="line">    <span class="keyword">var</span> oUl = <span class="built_in">document</span>.getElementById(<span class="string">'ul1'</span>);</span><br><span class="line"></span><br><span class="line">    <span class="keyword">var</span> firstEle = oUl.firstElementChild;</span><br><span class="line">    <span class="keyword">var</span> lastEle = oUl.lastElementChild;</span><br><span class="line"></span><br><span class="line">    firstEle.nextElementSibling.style.background = <span class="string">'red'</span>;</span><br><span class="line">    lastEle.previousElementSibling.style.background = <span class="string">'green'</span>;</span><br><span class="line"></span><br><span class="line">&lt;<span class="regexp">/script&gt;</span></span><br></pre></td></tr></table></figure>
<p><img src="http://7xq6al.com1.z0.glb.clouddn.com/d9.png" alt></p>
<ul>
<li><code>nextSibling</code>：节点的后一个节点，如果该节点是最后一个节点，则为<code>null</code>。注意有可能拿到的节点是文本节点，与预期的不符，要进行处理一下</li>
<li><code>nextElementSibling</code>：返回后一个元素节点，后一个节点必须是<code>Element</code>，注意<code>IE9</code>以下浏览器不支持</li>
</ul>
<h4 id="6-3-子关系型API"><a href="#6-3-子关系型API" class="headerlink" title="6.3 子关系型API"></a>6.3 子关系型API</h4><hr>
<ul>
<li><code>childNodes</code>：<ul>
<li>返回一个即时的<code>NodeList</code>，表示元素的子节点列表，子节点可能会包含文本节点，注释节点等。<code>childNodes</code>子节点列表集合（只读属性 有兼容性问题 ）</li>
</ul>
</li>
</ul>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">ul</span> <span class="attr">id</span>=<span class="string">"ul1"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span>&gt;</span>11111<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span>&gt;</span>22222<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span>&gt;</span>3333<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span>&gt;</span>44444<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="javascript">    <span class="keyword">var</span> oUl = <span class="built_in">document</span>.getElementById(<span class="string">'ul1'</span>);</span></span><br><span class="line"><span class="javascript">    <span class="built_in">console</span>.log(oUl.childNodes);</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p><img src="http://7xq6al.com1.z0.glb.clouddn.com/d10.png" alt></p>
<ul>
<li><p>从截图中可以看出 这段代码中<code>ul</code>的子节点有<code>9</code>个，这说明使用<code>childNodes</code>获取的节点包括了文本节点和元素节点</p>
</li>
<li><p><code>childNodes</code> 在低版本的<code>ie</code> 浏览器下获取的节点只包括元素节点，这就导致了兼容性问题</p>
</li>
<li>如何解决兼容性？？<ul>
<li>根据子节点的<code>nodeType</code>属性值判断</li>
</ul>
</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">for</span> (<span class="keyword">var</span> i=<span class="number">0</span>; i&lt;oUl.childNodes.length; i++) &#123;</span><br><span class="line"></span><br><span class="line">     <span class="keyword">if</span> ( oUl.childNodes[i].nodeType == <span class="number">1</span> ) &#123;</span><br><span class="line">        oUl.childNodes[i].style.background = <span class="string">'red'</span>;</span><br><span class="line">     &#125;</span><br><span class="line"></span><br><span class="line"> &#125;</span><br></pre></td></tr></table></figure>
<ul>
<li><p><code>children</code>：</p>
<ul>
<li>一个即时的<code>HTMLCollection</code>，子节点都是<code>Element</code>，<code>IE9</code>以下浏览器不支持。<code>children</code>子节点列表集合（只读属性 推荐使用 ）</li>
</ul>
</li>
<li><p><code>children</code> 获取的子节点只包含元素节点</p>
</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>; i&lt;oUl.children.length; i++)&#123;</span><br><span class="line">    oUl.children[i].style.background = <span class="string">'red'</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ul>
<li><code>firstNode</code>：第一个子节点</li>
<li><p><code>lastNode</code>：最后一个子节点</p>
</li>
<li><p><code>firstChild</code> （firstElementChild） <code>lastChild</code>(lastElementChild) 第一个子节点 最后一个子节点</p>
</li>
<li><p><code>firstChild</code> 、<code>lastChild</code> 和<code>childNodes</code>同样的存在兼容性问题，在低版本<code>ie</code>浏览器中只能获取到元素节点</p>
</li>
<li><p><code>firstElementChild</code>、 <code>lastElementChild</code> 获取第一个元素子节点，最后一个元素子节点 推荐使用</p>
</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> oUl = <span class="built_in">document</span>.getElementById(<span class="string">'ul1'</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">//    oUl.firstChild.style.background = 'red';//标准浏览器 报错</span></span><br><span class="line"><span class="comment">//    oUl.lastChild.style.background = 'red';//标准浏览器 报错</span></span><br><span class="line"></span><br><span class="line">oUl.firstElementChild.style.background = <span class="string">'red'</span>;</span><br><span class="line">oUl.lastElementChild.style.background = <span class="string">'red'</span>;</span><br></pre></td></tr></table></figure>
<p><img src="http://7xq6al.com1.z0.glb.clouddn.com/d11.png" alt></p>
<ul>
<li><code>hasChildNodes</code>方法：可以用来判断是否包含子节点</li>
</ul>
<h3 id="七、元素属性型"><a href="#七、元素属性型" class="headerlink" title="七、元素属性型"></a>七、元素属性型</h3><hr>
<h4 id="7-1-setAttribute"><a href="#7-1-setAttribute" class="headerlink" title="7.1 setAttribute"></a>7.1 setAttribute</h4><hr>
<ul>
<li><code>setAttribute</code>：它允许我们对元素属性值做出修改与<code>getAttribute</code>一样<code>setAttribute</code>也能用于元素节点</li>
<li>通过<code>setAttribute</code>对文档做出修改后，在通过浏览器的查看源码选项看到的任然是改变之前的属性值，也就是说<code>setAttribue</code>做出的修改，不会反应到文档本身的源码里</li>
<li><code>setAttribute</code>优势在于可以修改文档中的任何一个属性</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"></span><br><span class="line">element.setAttribute(name, value);</span><br></pre></td></tr></table></figure>
<ul>
<li>其中<code>name</code>是特性名，<code>value</code>是特性值。如果元素不包含该特性，则会创建该特性并赋值。</li>
<li>如果元素本身包含指定的特性名为属性，则可以访问属性进行赋值，比如下面两条代码是等价</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"></span><br><span class="line">element.setAttribute(<span class="string">"id"</span>,<span class="string">"test"</span>);</span><br><span class="line"></span><br><span class="line">element.id = <span class="string">"test"</span>;</span><br></pre></td></tr></table></figure>
<ul>
<li><p><strong>非DOM的解决方案</strong></p>
<ul>
<li>其实不用<code>setAttribute</code>也可以改变元素的属性</li>
<li><code>setAttribute</code>方法是第一级<code>DOM</code>的组成部分，它可以设计任何元素节点的任意属性。在第1级<code>DOM</code>出现之前，你可以通过另外一种办法设置大部分元素的属性</li>
</ul>
</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line">element.value = <span class="string">"the new value"</span>;</span><br></pre></td></tr></table></figure>
<p>与下面语句等价</p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line">element.setAttribute(<span class="string">"value"</span>,<span class="string">"the new value"</span>);</span><br></pre></td></tr></table></figure>
<h4 id="7-2-getAttribute"><a href="#7-2-getAttribute" class="headerlink" title="7.2 getAttribute"></a>7.2 getAttribute</h4><hr>
<ul>
<li><code>getAttribute</code>返回指定的特性名相应的特性值，如果不存在，则返回<code>null</code>或空字符串。</li>
<li><code>getAttribute</code>不属性<code>doucment</code>对象，不能通过<code>document</code>对象调用，只能通过元素节点对象调用</li>
<li>例如可以与<code>getElementsByTagName</code>方法合用，获取每个<code>p</code>的<code>title</code>属性</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> paras = <span class="built_in">document</span>.getElementsByTagName(<span class="string">"p"</span>);</span><br><span class="line"><span class="keyword">for</span>(<span class="keyword">var</span> i=<span class="number">0</span>;i&lt;para.lenght;i++)&#123;</span><br><span class="line">    alert(paras.getAttrtitube(<span class="string">"title"</span>));</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h3 id="八、表格操作"><a href="#八、表格操作" class="headerlink" title="八、表格操作"></a>八、表格操作</h3><hr>
<p><img src="http://7xq6al.com1.z0.glb.clouddn.com/d12.png" alt></p>
<h3 id="九、样式操作"><a href="#九、样式操作" class="headerlink" title="九、样式操作"></a>九、样式操作</h3><hr>
<p><img src="http://7xq6al.com1.z0.glb.clouddn.com/d13.png" alt></p>
<h3 id="十、大小和偏移"><a href="#十、大小和偏移" class="headerlink" title="十、大小和偏移"></a>十、大小和偏移</h3><hr>
<p><img src="http://7xq6al.com1.z0.glb.clouddn.com/d14.png" alt></p>
<h3 id="十一、网上的一张思维导图总结"><a href="#十一、网上的一张思维导图总结" class="headerlink" title="十一、网上的一张思维导图总结"></a>十一、网上的一张思维导图总结</h3><hr>
<p><img src="http://7xq6al.com1.z0.glb.clouddn.com/d15.png" alt></p>
<hr>
<ul>
<li>参考<ul>
<li><code>JavaScript DOM</code>编程艺术</li>
<li><a href="http://www.jianshu.com/p/e1391dc17361" target="_blank" rel="noopener">常用DOM操作</a></li>
</ul>
</li>
</ul>
<hr>
<ul>
<li><a href="https://github.com/poetries/poetries.github.io/blob/dev/source/_posts/DOM%E7%BC%96%E7%A8%8B%E4%B9%8BAPI%E5%AD%A6%E4%B9%A0%E6%80%BB%E7%BB%93%E7%AF%87.md" target="_blank" rel="noopener">本文mardown原文件</a></li>
</ul>

      </div>
    
  </div>

</article>

<button class="assist-btn2 circle" id="assist_btn2" title="点亮屏幕" style="left: 27px; top: 152px;">
  <i class="iconfont" style="display:inline-block;color:red;width:20px;height:20px;">&#xe61d;</i>
</button>
<button class="assist-btn1 circle" id="assist_btn1" title="关闭屏幕亮度" style="left: 27px; top: 152px;">
  <i class="iconfont toc-title" style="display:inline-block;color:red;width:20px;height:20px;">&#xe61d;</i>
</button>


<script src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>	

<script src="https://my.openwrite.cn/js/readmore.js" type="text/javascript"></script>
<script>
  const btw = new BTWPlugin();
  btw.init({
    id: "container",
    blogId: "22699-1592137983091-414",
    name: "前端进阶之旅",
    qrcode: "https://poetries1.gitee.io/img-repo/2020/06/qrcode.jpg",
    keyword: "3a3b3c",
  });
</script>

<script type="text/javascript">

// white theme
var body = {color: "#555", background: "#000"};
var a_tag = {color: "#222"};
var header = { background: "#222"};
var logo_line_i = {background: "#222"};
// var post_code = {background: "#eee", color: "#222"};

function switch_theme() {
 $("body").css(body);
 $("a:not('.links-of-author-item a, .site-state-item a, .site-state-posts a, .feed-link a, .motion-element a, .post-tags a, .show-commit-cls a, #donate_board a')").css(a_tag);
 $(".header, .footer").css(header);
 $(".logo-line-before i, .logo-line-after i").css(logo_line_i);
 //$(".post code").css(post_code);
 $("#idhyt-surprise-ball #idhyt-surprise-ball-animation .drag").css(a_tag);
 $(".post-title-link, .posts-expand .post-meta, .post-comments-count, .disqus-comment-count, .post-category a, .post-nav-next a, .post-nav-item a").css(a_tag);
 
 // $("code").css({color: '#c5c8c6', background: '#1d1f21'});
 //$("#assist_btn1").hide(1500);
}

$(function () {
$("#assist_btn2").css("display","none");
 $("#assist_btn1").click(function() {
     switch_theme();
$("div#toc.toc-article").css({
 "background":"#eaeaea",
 "opacity":1
});
$(".toc-article ol").show();
$("#toc.toc-article .toc-title").css("color","#a98602");
$("#assist_btn1").css("display","none");
$("#assist_btn2").css("display","block");
 });
$("#assist_btn2").click(function() {
$("#assist_btn2").css("display","none");
$("#assist_btn1").css("display","block");
$("body").css("background","url(http://www.miaov.com/static/ie/images/news/bg.png)")
     $(".header, .footer").css("background","url(http://www.miaov.com/static/ie/images/news/bg.png)")
$(".toc-article ol").toggle(1000);
 });
});


//背景随机

var Y, O, E, L, B, C, T, z, N, S, A, I;
!function() {
var e = function() {
for (O.clearRect(0, 0, L, B), T = [{
x: 0,
y: .7 * B + C
}, {
x: 0,
y: .7 * B - C
}]; T[1].x < L + C;) t(T[0], T[1])
}, t = function(e, t) {
O.beginPath(), O.moveTo(e.x, e.y), O.lineTo(t.x, t.y);
var n = t.x + (2 * I() - .25) * C,
 r = a(t.y);
O.lineTo(n, r), O.closePath(), N -= S / -50, O.fillStyle = "#" + (127 * A(N) + 128 << 16 | 127 * A(N + S / 3) + 128 << 8 | 127 * A(N + S / 3 * 2) + 128).toString(16), O.fill(), T[0] = T[1], T[1] = {
 x: n,
 y: r
}
}, a = function n(e) {
var t = e + (2 * I() - 1.1) * C;
return t > B || t < 0 ? n(e) : t
};
Y = document.getElementById("evanyou"), O = Y.getContext("2d"), E = window.devicePixelRatio || 1, L = window.innerWidth, B = window.innerHeight, C = 90, z = Math, N = 0, S = 2 * z.PI, A = z.cos, I = z.random, Y.width = L * E, Y.height = B * E, O.scale(E, E), O.globalAlpha = .6, document.onclick = e, document.ontouchstart = e, e()
}()

   
$("#toc-eye").click(function(){
$("#toc.toc-article").toggle(1000);
});

</script>


   
  <div class="text-center donation">
    <div class="inner-donation">
      <span class="btn-donation">支持一下</span>
      <div class="donation-body">
        <div class="tip text-center">扫一扫，支持poetries</div>
        <ul>
        
          <li class="item">
            
              <span>微信扫一扫</span>
            
            <img src="/images/weixin.jpg" alt="">
          </li>
        
          <li class="item">
            
              <span>支付宝扫一扫</span>
            
            <img src="/images/zhifubao.jpg" alt="">
          </li>
        
        </ul>
      </div>
    </div>
  </div>


   
  <div class="box-prev-next clearfix">
    <a class="show pull-left" href="/2016/09/09/Emmet常用快捷键/">
        <i class="icon icon-angle-left"></i>
    </a>
    <a class="show pull-right" href="/2016/09/24/javascript笔记基础总结篇/">
        <i class="icon icon-angle-right"></i>
    </a>
  </div>




</div>


  <a id="backTop" class="back-top">
    <i class="icon-angle-up"></i>
  </a>




  <div class="modal" id="modal">
  <span id="cover" class="cover hide"></span>
  <div id="modal-dialog" class="modal-dialog hide-dialog">
    <div class="modal-header">
      <span id="close" class="btn-close">关闭</span>
    </div>
    <hr>
    <div class="modal-body">
      <ul class="list-toolbox">
        
          <li class="item-toolbox">
            <a
              class="CIRCLE"
              href="/archives/"
              rel="noopener noreferrer"
              target="_self"
              >
              博客
            </a>
          </li>
        
          <li class="item-toolbox">
            <a
              class="CIRCLE"
              href="/categories/"
              rel="noopener noreferrer"
              target="_self"
              >
              分类
            </a>
          </li>
        
          <li class="item-toolbox">
            <a
              class="CIRCLE"
              href="/tags/"
              rel="noopener noreferrer"
              target="_self"
              >
              标签
            </a>
          </li>
        
          <li class="item-toolbox">
            <a
              class="CIRCLE"
              href="/search/"
              rel="noopener noreferrer"
              target="_self"
              >
              搜索
            </a>
          </li>
        
          <li class="item-toolbox">
            <a
              class="CIRCLE"
              href="/link/"
              rel="noopener noreferrer"
              target="_self"
              >
              友链
            </a>
          </li>
        
          <li class="item-toolbox">
            <a
              class="CIRCLE"
              href="/about/"
              rel="noopener noreferrer"
              target="_self"
              >
              关于
            </a>
          </li>
        
      </ul>

    </div>
  </div>
</div>



  
      <div class="fexo-comments comments-post">
    

    

    
    

    

    
    

    

<!-- Gitalk评论插件通用代码 -->
<div id="gitalk-container"></div>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.css">
<script src="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js"></script>
<script>
const gitalk = new Gitalk({
  clientID: '5567a2c4abb858009d96',
  clientSecret: 'b9039ec056cf5c2346b3cdb63308a28c163f91e5',
  repo: 'poetries.github.io',
  owner: 'poetries',
  // 在这里设置一下截取前50个字符串, 这是因为 github 对 label 的长度有了要求, 如果超过
  // 50个字符串则会报错.
  // id: location.pathname.split('/').pop().substring(0, 49),
  id: location.pathname,
  admin: ['poetries'],
  // facebook-like distraction free mode
  distractionFreeMode: false
})
gitalk.render('gitalk-container')
</script>
<!-- Gitalk代码结束 -->



  </div>

  

  <script type="text/javascript">
  function loadScript(url, callback) {
    var script = document.createElement('script')
    script.type = 'text/javascript';

    if (script.readyState) { //IE
      script.onreadystatechange = function() {
        if (script.readyState == 'loaded' ||
          script.readyState == 'complete') {
          script.onreadystatechange = null;
          callback();
        }
      };
    } else { //Others
      script.onload = function() {
        callback();
      };
    }

    script.src = url;
    document.getElementsByTagName('head')[0].appendChild(script);
  }

  window.onload = function() {
    loadScript('/js/bundle.js?235683', function() {
      // load success
    });
  }
</script>


  <!-- 页面点击小红心 -->
  <script type="text/javascript" src="/js/clicklove.js"></script>
 
  
</body>
</html>
